<template>
	<view class="container">
		<view class="wrapper">
			<view class="welcome">
				For address updates
			</view>
			<view class="input-content">
                <lv-select
                @handleSearch = "handleSearch"
                @change = "change"
                placeholder = "请输入信息"
                :infoList = "infoList"
                :showValue = "showValue"
                v-model = "searchValue"
                :loading = "loading"
                type = "primary"
                :uniShadow = "true"
                ></lv-select>
				<!-- <view class="input-wrapper hg90">
					<view class="picker-container mg-r10">
						<picker ref="condominiumCom" @change="bindPickerChange" :value="condominiumIndex" :range="condominiumList" range-key="name">
							<view class="uni-input">{{condominiumList[condominiumIndex]?condominiumList[condominiumIndex].name : ''}}</view>
						</picker>
						<uni-icons color="#000000" type="arrowdown" size="18" @click="arrowDownClick" />
					</view>
				</view> -->
				<view class="input-address-info">
					<view class="input-wrapper">
						<view class="input-item">
							<text class="tit">Blk</text>
							<input type="text" placeholder="Type Blk No." v-model="blk" />
						</view>
					</view>
					<view class="input-wrapper mg-lr30">
						<view class="input-item">
							<text class="tit">Floor</text>
							<input type="text" placeholder="Type Floor No." v-model="floor" />
						</view>
					</view>
					<view class="input-wrapper">
						<view class="input-item">
							<text class="tit">Unit</text>
							<input type="text" placeholder="Type Unit No." v-model="unit" />
						</view>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @click="toNext" :loading="logining">Terms of service</button>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
    import lvSelect from '@/components/lv-select/lv-select';
    
    
	export default{
		components: {
			uniIcons
		},
		data(){
			return {
				condominiumList: ['12313'],
				condominiumIndex: 0,
				name: '',
				mobile: '',
				blk: '',
				floor: '',
				unit: '',
				logining: false,
                
                // lv-select
                searchValue: '',
                loading: false,
                showValue: 'name', // 需要显示的数据，必须与infoList中的name对应
                infoList: [],
                infoLists: [],
                // lv-select
                
			}
		},
		onLoad(options){
			if(options.name) {
				this.name = options.name
			}
			if(options.mobile) {
				this.mobile = options.mobile
			}
			this.loadData();
		},
		methods: {
            handleSearch(val) {
                this.loading = true
                if (val) {
                    const list = []
                    this.infoLists.forEach(item => {
                        if((new RegExp(val, 'i')).test(item.name)) list.push(item)
                    })
                    this.infoList = list
                } else {
                    this.infoList = this.infoLists
                }

            },
            change(val){
                this.now_condominium_id = val.value
            },
			async loadData() {
                let _this = this;
                
                let params = {
                	dict_type: 'condominium'
                }
                this.$api.dictionary(params, res => {
                	if(res.code === 1) {
                		_this.condominiumList = res.data || []
                		let default_condominium = _this.$db.get('default_condominium')
                		if(_this.condominiumList.length > 0) {
                			if(default_condominium) { // 有默认小区
                				let index = _this.condominiumList.findIndex(item => { return item.value == default_condominium })
                				if(index < 0) {  // 列表中没有该小区
                					_this.$db.set('default_condominium', _this.condominiumList[0].value)
                				} else {
                					_this.condominiumIndex = index
                				}
                			} else {
                				_this.$db.set('default_condominium', _this.condominiumList[0].value)
                			}
                            this.infoLists = _this.condominiumList
                            this.handleSearch()
                		}
                	}
                })
				this.mobileAreaList = await this.$api.json('mobileAreaList')
			},
			bindPickerChange(e) {
				this.condominiumIndex = e.target.value
				this.$db.set('default_condominium', this.condominiumList[e.target.value].value)
			},
			arrowDownClick() {
				this.$refs.condominiumCom.$el.click();
			},
			navBack(){
				uni.navigateBack();
			},
			// 下一步
			async toNext(){
				this.logining = true
				
				let data = {
					full_name: this.name,
					mobile: this.mobile,
					// condominium_id: this.condominiumList[this.condominiumIndex].value,
                    condominium_id: this.now_condominium_id,
					block: this.blk,
					floor: this.floor,
					unit: this.unit,
					is_default: 1
				}
				
				let _this = this
				
				this.$api.addressSave(data, res => {
					if(res.code === 1) {
						_this.$common.navigateTo('terms')
					} else {
						_this.logining = false
						_this.$common.errorToShow(res.msg)
					}
				})
			}
		},

	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.container{
		position:relative;
		overflow: hidden;
		background: #fff;
	}
	.wrapper{
		margin-top: 200rpx;
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -60upx;
		font-weight: normal;
		font-size: $font-base + 2upx;
		color: #1C1C1C;
	}
	.input-content{
		padding: 0 30rpx;
        .input-placeholder{
            color: #666666
        }
		.input-wrapper {
            margin-top: 30rpx;
			display:flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			/* padding: 0 0 0 30upx; */
            padding: 0 0 0 12upx;
			height: 110upx;
			border-radius: 4px;
			margin-bottom: 50upx;
			border: 2rpx solid #D8D8D8;
			.input-check {
				height: 110upx;
				width: 110upx;
				padding: 22rpx;
			}
			.input-label-img {
				height: 50rpx;
				width: 50rpx;
				margin-right: 30rpx;
			}
			.input-item{
				display:flex;
				flex-direction: column;
				align-items:flex-start;
				justify-content: center;
				flex: 1;
				&:last-child{
					margin-bottom: 0;
				}
				.tit{
					height: 50upx;
					line-height: 56upx;
					font-size: $font-sm+2upx;
					color: #444444;
				}
				input{
					height: 60upx;
					font-size: $font-base; // +2upx
					color: $font-color-dark;
					width: 100%;
				}
			}
		}
	}

	.confirm-btn{
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 60upx;
		z-index: 95;
		width: 700upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 10rpx;
		background: #4666D5;
		color: #fff;
		font-family: Poppins;
		font-size: $font-base;
		font-weight: bold;
		box-shadow: 0 20rpx 60rpx rgba(64, 191, 255, 0.24);
		/* &:after{
			border-radius: 100px;
		} */
	}
	.contact-section{
		font-size: $font-base;
		color: #1C1C1C;
		text-align: left;
		margin-top: 40upx;
		padding: 0 30rpx 40rpx;
	}
	.register-section{
		margin-top: 40upx;
		padding: 0 30rpx;
		width: 100%;
		text-align: right;
		text {
			font-size: $font-sm+2upx;
			color: #EB658D;
		}
	}
	.picker-container {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		flex: 1;
		picker {
			margin-right: 10rpx;
			width: 90%;
		}
	}
	.input-address-info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
		.input-wrapper {
			flex: 3;
			width: 30%;
		}
	}
	.mg-lr30 {
		margin: 0 30rpx;
	}
</style>
